// 日历与直方图
<template>
  <div class="bottomLeft">
    <el-row style="height:100%">
      <el-col style="height: 100%;">
        <!-- 标题 -->
        <el-row style="height:10%">
          <el-col :span="1" :offset="1">
            <span style="color:#5cd9e8">
              <icon name="chart-bar"></icon>
            </span>
          </el-col>

          <el-col :span="10">
              <span class="text mx-2" style="font-size:12px;margin-bottom:5px">中国疫情展示</span>
          </el-col>

        </el-row>

        <!-- 图表和按钮 -->
        <el-row style="height:90%;">
          <!-- button -->
          <el-col :span="3" :offset="1">
            <el-row style="height:20%;margin-top:20%;">
              <el-col :span="23" >
                <el-button size="mini" type="goon" @click="change_calendar"  plain>疫情日历</el-button>
              </el-col>
            </el-row>
            <el-row style="height:20%;margin-top:32%;">
              <el-col :span="23">
                <el-button size="mini" type="goon" @click="change_bar"  plain>疫情直方</el-button>
              </el-col>
            </el-row>
            <el-row style="height:20%;margin-top:30%;">
              <el-col :span="23">
                <el-button size="mini" type="goon" @click="change_test"  plain>测试数据</el-button>
              </el-col>
            </el-row>
          </el-col>

           <!-- 趋势表 -->
          <el-col :span="20" style="height:100%;">
            <bottom-right-chart v-if="type == 'calendar'" style="margin-top:-6%;margin-left:-5%"></bottom-right-chart>
            <bottom-right-chart-2 v-else-if="type == 'bar'"></bottom-right-chart-2>
            <bottom-right-chart-3 v-else></bottom-right-chart-3>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import BottomRightChart from './echarts/bottom/bottomRightChart.vue'
import BottomRightChart2 from './echarts/bottom/bottomRightChart2.vue'
import BottomRightChart3 from './echarts/bottom/bottomRightChart3.vue'

export default {
  data () {
    return{
      type: "calendar"
    }
  },
  components: {
    BottomRightChart,
    BottomRightChart2,
    BottomRightChart3
  },
  mounted () {

  },
  methods: {
    change_calendar () {
      this.type = 'calendar'
    },
    change_bar () {
      this.type = 'bar'
    },
    change_test () {
      this.type = 'test'
    }
  }

}
</script>

<style lang="scss" scoped>
.bottomRight{
  height: 100%;
  width: 100%;
}
.text {
    color: #c3cbde;
}

.el-button--goon {
color: rgb(255, 255, 255);
background-color: #20B2AA;
border-color: #20B2AA;
}
</style>